import 'package:flutter/material.dart';

class TestAnimation extends StatelessWidget {
  const TestAnimation({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("动画效果"),
        centerTitle: true,
      ),
      body: DecoratedBoxTransitionPage(),
    );
  }
}

class DecoratedBoxTransitionPage extends StatefulWidget {
  const DecoratedBoxTransitionPage({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _DecoratedBoxTransitionPageState();
}

class _DecoratedBoxTransitionPageState extends State<DecoratedBoxTransitionPage>
    with TickerProviderStateMixin {

  bool isStart = false;

  /// 动画控制器，设置动画持续时间为5秒，可重复播放
  late final AnimationController _controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 5),
  )..repeat(reverse: true);

  /// 在两种不同的装饰属性中变换，从圆形变成方形，红色变成白色背景，无阴影变成有阴影
  late final Animation<Decoration> _animation = DecorationTween(
    begin: BoxDecoration(
      color: Colors.orange,
      border: Border.all(style: BorderStyle.none),
      borderRadius: BorderRadius.circular(100),
      boxShadow: null,
    ),
    end: BoxDecoration(
      color: Colors.green,
      border: Border.all(style: BorderStyle.none),
      borderRadius: BorderRadius.zero,
      boxShadow: const <BoxShadow>[
        // BoxShadow(
        //   color: Colors.grey,
        //   blurRadius: 10.0,
        //   spreadRadius: 3.0,
        //   offset: Offset(0, 6.0),
        // )
      ],
    ),
  ).animate(_controller);

  late final AnimationController _controllers = AnimationController(
    vsync: this,
    duration: Duration(seconds: 5),
  )..repeat(reverse: true);

  late final Animation<Decoration> _animations = DecorationTween(
    begin: BoxDecoration(
      color: Colors.orange,
      border: Border.all(style: BorderStyle.none),
      borderRadius: BorderRadius.circular(100),
      boxShadow: null,
    ),
    end: BoxDecoration(
      color: Colors.green,
      border: Border.all(style: BorderStyle.none),
      borderRadius: BorderRadius.zero,
      boxShadow: []
    )
  ).animate(_controllers);


  late final AnimationController _controllers2 = AnimationController(
    vsync: this,
    duration: Duration(seconds: 5),
  )..repeat(reverse: true);

  late final Animation<Decoration> _animations2 = DecorationTween(
      begin: BoxDecoration(
          color: Colors.green,
          border: Border.all(style: BorderStyle.none),
          borderRadius: BorderRadius.zero,
          boxShadow: []
      ),
      end: BoxDecoration(
        color: Colors.orange,
        border: Border.all(style: BorderStyle.none),
        borderRadius: BorderRadius.circular(100),
        boxShadow: null,
      )
  ).animate(_controllers2);


  @override
  void dispose() {
    _controller.dispose();
    _controllers.dispose();
    super.dispose();
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controllers.reset();
    _controllers2.reset();

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children: [
          Center(
            child: DecoratedBoxTransition(
              decoration: _animation,
              child: Container(
                width: 200,
                height: 200,
                padding: const EdgeInsets.all(20),
                //child: const FlutterLogo(),
              ),
            ),
          ),
          InkWell(
              onTap: () {
                print("lsdfs");
                // if(!_animations.isCompleted){
                //   _controllers.forward();
                // }else{
                //   _controllers.reset();
                // }
                if(!isStart){
                  _controllers.forward();
                  setState(() {
                    isStart = true;
                  });
                }else{
                  _controllers2.forward();
                  setState(() {
                    isStart = false;
                  });
                }

              },
              child: DecoratedBoxTransition(
                decoration: isStart? _animations:_animations2,
                child: Container(
                  width: 100,
                  height: 100,
                ),
              )),
        ],
      ),
    );
  }
}
